<!--学籍注册--新增和编辑-->
<template>
	<div>
		<div class="marginLeftRight">
			<div class="my-form-container" style="height:302px">
				<el-form ref="dataForm" :model="dataForm" :rules="rules" class="demo-ruleForm">
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="studentName">
								<div class="my-form-item-value">
									<el-input class="inputWidth" v-model="dataForm.studentName"></el-input>
								</div>
							</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="studentCode">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.studentCode"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="24">
						<div class="my-form-item-label">身份证号<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="idCard">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.idCard"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
						<div class="my-form-item-label">专业</div>
						<el-form-item  prop="yearSpecialtyName">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.yearSpecialtyName"></el-input>
							</div>
						</el-form-item>
					</el-col> -->
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">专业班次<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="specialtyClassName">
							<div class="my-form-item-value chose-student">
								<el-input class="inputWidth" v-model="dataForm.specialtyClassNameShow" disabled></el-input>
								<img src="../../../../assets/assessment/icon-plan-record-detail.png" @click="choseZYBtn"> 
								<img src="../../../../assets/assessment/icon-delete.png" @click="deleteInput"> 
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">入学年月<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="beginDate">
							<div class="my-form-item-value">
								<el-date-picker v-model="dataForm.beginDate" type="date" style="width:184" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">民族<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="nation">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.nation" placeholder="请选择" class="width139 right10" clearable>
									<el-option v-for="item in nation" :key="item.label" :label="item.label" :value="item.label"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学员来源<span style="color:red;margin-left:10px">*</span></div>
						<el-form-item  prop="sourceArea">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.sourceArea" placeholder="请选择" class="inputWidth" clearable>
									<el-option
										v-for="(item,index) in areaList"
										:key="index"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
								<!-- 青年学生，部队考生，其他 -->
								<!-- <el-input class="inputWidth" v-model="dataForm.sourceArea"></el-input> -->
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item" style="border:none">
					<el-col :span="12">
						<div class="my-form-item-label">生源省份</div>
						<el-form-item  prop="county">
							<div class="my-form-item-value">
								<el-select v-model="province" placeholder="请选择" class="width139 right10" @change="nextLas" clearable>
									<el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.label"></el-option>
								</el-select>
								<el-select v-model="county" placeholder="请选择" class="width139 right10" @change="next1" clearable>
									<el-option v-for="cc in testList" :key="cc.value" :label="cc.label" :value="cc.label"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label"></div>
						<div class="my-form-item-value"></div>
					</el-col>
				</el-row>
				</el-form>
			</div>
			<div class="button-group">
				<div class="" @click="save">保存</div>
				<div class="" @click="cancel">取消</div>
			</div>
			<!-- 选择专业班次 -->
			<ChoseZY ref="chosezy" @choseZY="choseResult"></ChoseZY>
		</div>
	</div>
</template>

<script>
import {studentStatusSave,studentStatusDetail} from "@/api/student";
import {city }from "@/util/city"
import {nation} from "@/util/nation"
import ChoseZY from '@/components/choseZY' 
  export default {
		data(){
		  return {
			areaList:[
				{
					label:'青年学生',
					value:'青年学生'
				},
				{
					label:'部队考生',
					value:'部队考生'
				},
				{
					label:'其他',
					value:'其他'
				},
			],
            dataForm:{
				studentCode:'',//学号
				studentName:'',//姓名
				idCard:'',//身份证号
				yearSpecialtyName:'',//专业
				specialtyClassName:'',// 专业班次
				specialtyClassNameShow:'',//专业班次展示
				beginDate:'',//入学年月
				nation:'',//民族
				studentProvinces:'',
				studentDui:''
			},
			province:'',
			county:'',
			testList:[],//区
			city:city,
			nation:nation,
			rules: {
				studentName: [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                ],
                studentCode: [
                    { required: true, message: '请填写学号', trigger: 'blur' }
                ],
                idCard: [
					{ required: true, message: '请填身份证号', trigger: 'blur' },
					{validator: (rule, value, callback) => {
					if (value && !/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
						callback(new Error('请输入正确的身份证号'));
					} else {
						return callback();
					}}, trigger: 'blur'}
                ],
				yearSpecialtyName: [
                    { required: true, message: '请填写专业', trigger: 'blur' }
                ],
				sourceArea: [
                    { required: true, message: '请填写学员来源', trigger: 'blur' }
                ],
                beginDate: [
                    { required: true, message: '请选择入学年月', trigger: 'change' }
                ],
				specialtyClassName:[
                    { required: true, message: '请选择专业班次', trigger: 'change' }
                ],
				nation:[
                    { required: true, message: '请选择民族', trigger: 'change' }
                ],
            },
          }
		},
		components:{ChoseZY},
		mounted(){
			if(this.$route.query.id){
                this.$set(this.$route.meta,'title','修改')
            }else{
                this.$set(this.$route.meta,'title','新增')
            }
			this.initDetail(this.$route.query.id)
		},
        methods: {
			async initDetail(id){
				let res = await studentStatusDetail({id:id});
				this.dataForm = res.data;
				this.county = res.data.studentProvinces.split(',')[1]
				this.province = res.data.studentProvinces.split(',')[0]
			},
			 //选择专业班次
			choseZYBtn(){
				this.$refs.chosezy.dialogVisible = true;
			},
			choseResult(row){
				console.log(row)
				this.dataForm.specialtyClassName = row.id
				this.dataForm.specialtyClassNameShow = row.className
				this.dataForm.studentDui = row.studentTeam
			},
			deleteInput(){
				this.dataForm.specialtyClassNameShow = ''
				this.dataForm.specialtyClassName = '';
			},
			nextLas(e){
				this.county = '';
				this.testList = [];
				if(e != ''){
					this.testList = city.filter(item=>item.label == e)[0].children;
				}
			},
            //保存数据
            save(){
                this.$refs['dataForm'].validate(async(valid) => {
                    if (valid) {
						let studentP;
						if(this.province == '') {
							studentP = ''
						} else if(this.province != '' && this.county == ''){
							studentP = this.province;
							this.$message({
								type:'info',
								message:'生源省份不完整！'
							})
							return
						} else if(this.province != '' && this.county != ''){
							studentP = this.province + ',' + this.county
						}
						let params = {
							...this.dataForm,
							studentProvinces: studentP
						}
                        let res = await studentStatusSave(params);
                        if(res.code == 200){
							if(this.dataForm.id){
								this.$message({message: '编辑成功',type: 'success'});
							}else{
								this.$message({message: '添加成功',type: 'success'});
							}
							this.$router.push({
								path:'/student/studentStatus/registerList/registerList'
							})
							this.$emit('saveFirst')
                        }else{
                            this.$message.error(res.msg);
                        }
                    } 
                });
            },
            //取消
            cancel(){
                this.$router.push({
                    path:'/student/studentStatus/registerList/registerList'
                })
            }
        }
  };
</script>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.right10{margin-right: 10px;}
	.width139{width: 139px;}
	.inputWidth{width: 184px;}
	/deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
</style>